<template>
  <div class="login-page">
    <ElForm class="login-form">
      <ElFormItem label="用户名">
        <ElInput v-model="loginInfo.username"></ElInput>
      </ElFormItem>
      <ElFormItem label="密码">
        <ElInput v-model="loginInfo.password"></ElInput>
      </ElFormItem>
      <ElButton type="success" @click="login">登录</ElButton>
      <div>store:token {{ token }}</div>
      <div>store:tokenEX {{ tokenEx }}</div>
    </ElForm>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
// import axios from "axios";
import axios from '@/api/axiosConfig'
import AppVue from "@/App.vue";
import { defineComponent } from "vue";
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";

export default defineComponent({
  name: "LoginPage",
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      loginInfo: {
        username: "zhangsan",
        password: "123",
      }
    };
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
    ...mapState(['token']),
    
    ...mapGetters(['tokenEx']),
    // this.$store.state.token;
  },
  created() {},
  mounted() {
    // console.log(this.$store.token)
  },
  methods: {
      ...mapMutations(['setToken','other']),
      // 浪费代码 但是能重命名
      // ...mapMutations({
      //   flushToken:'setToken',
      //   others:'other'
      // }),
    // setToken(){

    // }
    // other(){

    // }
    // flushToken(){

    // }
    // sampleM() {},
    async login() {
      const res = await axios({
        url: "http://localhost:8080/pwd/login?"+
        `username=${this.loginInfo.username}&password=${this.loginInfo.password}`,
        method: "post",

      });
      const token = res.data;

      // 存到store中
      this.setToken(token)
      localStorage.setItem("TOKEN",token)
      // localStorage.getItem("TOKEN")
      // this.flushToken(token)
    //   console.log(this.$store)
    //     // store.commit("flushToken","xxxxx")

    //   this.$store.commit("flushToken",res.data);
      this.$router.push("/about");
    },
  },
  watch: {
    // sampleP(n, o) {},
  },
});
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.login-form {
  width: 300px;
  margin-left: 200px;
}
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
